<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
			padding: 0;
			margin: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;
			background-color: #222;
		}

		.box {
			background-image: linear-gradient(180deg, #fdc5c5, #ffefef);
			color: #ff4e5c;
			width: 10rem;
			height: 10rem;
			border-radius: 5rem;
			font-size: 3rem;
			text-align: center;
			line-height: 10rem;
		}

		*,
		:after,
		:before {
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}

		.circle {
			border: 0.6rem solid #ff4e5c;
			-webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
			clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
			position: absolute;
			width: 10rem;
			height: 10rem;
			border-radius: 5rem;
		}

		.circle3 {
			border: 0.6rem solid #ff4e5c;
			-webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
			clip-path: polygon(20% 0, 100% 0, 100% 100%, 50% 100%);
			position: absolute;
			width: 10rem;
			height: 10rem;
			border-radius: 5rem;
		}

		.circle2 {
			-ms-transform: rotate(-30deg);
			transform: rotate(-30deg);
			border: 0.6rem solid #ffe7e4;
			-webkit-clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
			clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
			position: absolute;
			width: 10rem;
			height: 10rem;
			border-radius: 5rem;
		}
	</style>
	<body>
		<div class="box">
			<div class="circle"></div>
			<!-- <div class="circle2"></div> -->
			<span>46</span>
		</div>
		<div class="box">
			<div class="circle circle3"></div>
			<div class="circle2"></div>
			<span>46</span>
		</div>
	</body>
</html>
